<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="page-background"></view>
		<canvas class="qrcode-canvas" canvas-id="qrcode" style="width: 200px;height: 200px;" />
		<view class="page-container">
			<view class="content">
				<view class="poster-image"><image v-if="posterSrc" :src="posterSrc" mode="aspectFit"></image></view>
				<canvas class="poster-canvas"  canvas-id="poster" :style="{ width: `${postercanvas_width}px`, height: `${postercanvas_height}px` }" />
			</view>
		</view>
		<view class="page-foot">
			<view class="template-list">
				
				<!-- #ifdef H5 -->
					<view class="tips text-sm wanl-gray">
						<text class="wlIcon-31tishi"></text> 长按图片保存
					</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
					<view class="tips text-sm wanl-orange" @tap="save()">
						<text class="wlIcon-image margin-right-xs"></text>保存到相册
					</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
import jssdk from '../../../common/libs/jssdk';
import uQRCode from '@/common/uqrcode.js';

export default {
	data() {
		return {
			QRCodeText: '',
			QRCodeSrc: '',
			posterSrc: '',
			postercanvas_width: 0, // 画布宽度
			postercanvas_height: 0, // 画布高度
			posterTemplates: []
		};
	},
	onLoad(option) {
		// 提示
		uni.showLoading({
			title: '二维码生成中',
			mask: true
		});
		
		this.loadData();
	},
	methods: {
		// 获取二维码
		getQrCode(temp){
			// 注意 access_token 参数是必须放在url后面 其余参数 要在data里面
			let path = 'pages/index'
			uni.request({
				url: '/wanlshop/ddp/getqrcode',
				method: 'POST',
				responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
				data: {
					page: path, // 需要打开的页面路径
					scene: this.user.id // 这个是需要传递的参数
				},
				success: result => {
					// 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
					// 如果不加请求时 responseType: 'arraybuffer' 则会转码失败
					let res = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
					
					this.QRCodeSrc = res;
					this.create(temp);
					
				},
				fail: err => {
					uni.hideLoading();
					uni.showModal({
						content: err.errMsg,
						showCancel:false
					})
				}
			});
			
		},
		
		// 二维码配置
		async loadData(option) {
			
			await uni.request({
				url: '/wanlshop/ddp/shopqrcode',
				method: 'POST',
				success: result => {
					//console.log(JSON.stringify( result));
					// 生成二维码
					//this.getQrCode(result.data);
					
					uQRCode.make({
						canvasId: 'qrcode',
						text: result.data['shopid'],
						size: 200,
						success: res => {
							this.QRCodeSrc = res;
							this.create(result.data);
						}
					});
					

				}
			});
		},
		create(posterTemplate) {
			uni.showLoading({
				title: '商家二维码生成中',
				mask: true
			});
			this.posterTemplates.forEach(x => {
				x.checked = false;
			});
			posterTemplate.checked = true;

			this.postercanvas_width = posterTemplate.canvas_width;
			this.postercanvas_height = posterTemplate.canvas_height;

			this.posterSrc = '';
			setTimeout(() => {
						this.wanlshopqr({
							canvasId: 'poster',
							canvas_width: posterTemplate.canvas_width,
							canvas_height: posterTemplate.canvas_height,
							shopname:posterTemplate.shopname,
							QRCodeSrc: this.QRCodeSrc,
							success: res => {
								this.posterSrc = res;
								uni.hideLoading();
							}
						});
			}, 100);
		},
		save() {
			uni.saveImageToPhotosAlbum({
				filePath: this.posterSrc,
				success: () => {
					this.$wanlshop.msg('保存成功');
				}
			});
		},
		wanlshopqr(options) {
			let { canvas_width, canvas_height, QRCodeSrc } = options;
			// 绑定画布
			var ctx = uni.createCanvasContext(options.canvasId);
			// 清除画布
			ctx.clearRect(0, 0, canvas_width, canvas_height + 20);
			
			let name = options.shopname
			// 名称最大长度限制 10，超出为省略号
			if (name.length > 10) {
				name = name.substring(0, 10) + '...';
			}
			// 计算文字定位距离
			let nameX = 180;
			let nameY = canvas_height - 30;
			let nameFontSize = 28;
			// 设置名称文字样式
			ctx.setFillStyle('#000000');
			ctx.setFontSize(nameFontSize);
			// 填充名称到画布
			ctx.fillText(name, nameX, nameY);
			
			
			// 填充二维码图片，并设置边距
			ctx.drawImage(QRCodeSrc, 15, 15, canvas_width - 30, canvas_height - 80);
			// 输出到画布中
			ctx.draw(false, () => {
				// 绘图全部完成后生成文件路径
				uni.canvasToTempFilePath({
					canvasId: options.canvasId,
					fileType: 'png',
					success: res => {
						options.success && options.success(res.tempFilePath);
					}
				});
			});
		}
	}
};
</script>

<style>
.page-background {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background-color: #f1f1f1;
}

.page-container {
	position: relative;
	z-index: 20;
}

.qrcode-canvas {
	position: fixed;
	right: 100vw;
	bottom: 100vh;
	z-index: -999;
}

.content {
	width: 100%;
	height: calc(100vh - 44px - 150px);
	overflow-y: scroll;
}

.poster-image {
	width: 100%;
	height: 100%;
	min-height: 500rpx;
	padding: 80rpx;
	box-sizing: border-box;
}

.poster-image image {
	width: 100%;
	height: 100%;
}

.poster-canvas {
	position: fixed;
	right: 100vw;
	bottom: 100vh;
}

.page-foot {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	background-color: #e5e5e5;
	padding-bottom: env(safe-area-inset-bottom);
}

.template-list {
	display: flex;
	position: relative;
	height: 100px;
}
.template-list .tips {
	position: absolute;
	display: flex;
	align-items: center;
	justify-items: center;
	justify-content: center;
	top: -60rpx;
	width: 100%;
}
.template-list .tips .wlIcon-31tishi{
	font-size: 32rpx;
}
.template-item {
	position: relative;
	height: 88px;
	margin: 6px 0 6px 6px;
}

.template-item::before {
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.template-item.checked::before {
	border: 2px solid #44aa33;
}

.template-item image {
	display: block;
	width: 100%;
	height: 100%;
}
</style>
